import React, { PureComponent, Suspense } from 'react';
import { connect } from 'dva';
import { Card, message, Radio, Row, Select } from 'antd';

import Histogram from '@/pages/OrderSystem/Option/Histogram';
import styles from './Test.less';
/* eslint react/no-multi-comp:0 */
@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))
class OrderBarChart extends PureComponent {
  state = {
    currentTabKey: '',
    param: {
      stockId: '',
      type: '1',
    },
  };

  xWidth = 0;

  tempNumber = 0;

  tempType = 1;

  barWidth = {
    xWidth1: 0,
    xWidth2: 0,
    xWidth3: 0,
    xWidth4: 0,
    xWidth5: 0,
    xWidth6: 0,
    xWidth7: 0,
    xWidth8: 0,
  };

  // 默认加载数据-起始方法
  radioHandleChange = e => {
    const { dispatch, instrument } = this.props;
    const { param } = this.state;
    this.xWidth = 0;
    param.stockId = instrument;
    if (e.target.value === 'a') {
      // param.type = "1";
      this.tempType = 1;
    } else if (e.target.value === 'b') {
      // param.type = "2";
      this.tempType = 2;
    } else if (e.target.value === 'c') {
      // param.type = "3";
      this.tempType = 3;
    } else if (e.target.value === 'd') {
      // param.type = "4";
      this.tempType = 4;
    } else if (e.target.value === 'e') {
      this.tempNumber = 0;
    } else if (e.target.value === 'f') {
      this.tempNumber = 4;
    }
    param.type = this.tempNumber + this.tempType;
    param.type = `${param.type}`;
    dispatch({
      type: 'rule/GetKlineStatistic',
      payload: param,
      callback: response => {
        if (param.type === '1') {
          this.xWidth = this.barWidth.xWidth1;
        } else if (param.type === '2') {
          this.xWidth = this.barWidth.xWidth2;
        } else if (param.type === '3') {
          this.xWidth = this.barWidth.xWidth3;
        } else if (param.type === '4') {
          this.xWidth = this.barWidth.xWidth4;
        } else if (param.type === '5') {
          this.xWidth = this.barWidth.xWidth5;
        } else if (param.type === '6') {
          this.xWidth = this.barWidth.xWidth6;
        } else if (param.type === '7') {
          this.xWidth = this.barWidth.xWidth7;
        } else if (param.type === '8') {
          this.xWidth = this.barWidth.xWidth8;
        }
        this.xWidth = this.xWidth !== 0 ? this.xWidth : response.list.x;
      },
    });
  };

  handleChange(value) {
    console.log(`selected ${value}`);
    this.xWidth = value;
    const { dispatch } = this.props;
    const { param } = this.state;
    if (param.type === '1') {
      this.barWidth.xWidth1 = value;
    } else if (param.type === '2') {
      this.barWidth.xWidth2 = value;
    } else if (param.type === '3') {
      this.barWidth.xWidth3 = value;
    } else if (param.type === '4') {
      this.barWidth.xWidth4 = value;
    } else if (param.type === '5') {
      this.barWidth.xWidth5 = value;
    } else if (param.type === '6') {
      this.barWidth.xWidth6 = value;
    } else if (param.type === '7') {
      this.barWidth.xWidth7 = value;
    } else if (param.type === '8') {
      this.barWidth.xWidth8 = value;
    }
    dispatch({
      type: 'rule/GetKlineStatistic',
      payload: param,
    });
  }

  selectDataArray = ['1', '2', '5', '10', '20'];

  // 选择组价的数据源
  renderSelect() {
    const { Option } = Select;
    const children = [];
    for (let i = 0; i < this.selectDataArray.length; i++) {
      children.push(<Option key={this.selectDataArray[i]}>{this.selectDataArray[i]}</Option>);
    }
    return children;
  }

  render() {
    const {
      rule: { klineStatisticData },
    } = this.props;

    const RadioButton = Radio.Button;
    const RadioGroup = Radio.Group;

    return (
      <Card bordered={false} style={{ paddingLeft: '-100' }}>
        {
          <div className={styles.controlBar}>
            <RadioGroup defaultValue="e" onChange={this.radioHandleChange}>
              <RadioButton value="e">&nbsp;涨跌幅&nbsp;</RadioButton>
              <RadioButton value="f">&nbsp;振幅&nbsp;</RadioButton>
            </RadioGroup>

            <Row>
              <RadioGroup defaultValue="a" onChange={this.radioHandleChange}>
                <RadioButton value="a">&nbsp;周&nbsp;</RadioButton>
                <RadioButton value="b">&nbsp;月&nbsp;</RadioButton>
                <RadioButton value="c">&nbsp;半年&nbsp;</RadioButton>
                <RadioButton value="d">&nbsp;年&nbsp;</RadioButton>
              </RadioGroup>
              <span style={{ textStyle: 'inline' }}>
                <span
                  style={{
                    fontSize: 16,
                    textAlign: 'left',
                    marginRight: '1rem',
                    marginLeft: '1rem',
                    fontWeight: '600',
                  }}
                >
                  刻度值间隔选择
                </span>
                {
                  <span>
                    {this.xWidth === 0 ? (
                      <div />
                    ) : (
                      <Select
                        defaultValue={this.xWidth}
                        style={{ width: '600', paddingLeft: '-100', marginLeft: '100' }}
                        onChange={this.handleChange.bind(this)}
                      >
                        {this.renderSelect()}
                      </Select>
                    )}
                  </span>
                }
              </span>
            </Row>
          </div>
        }

        {klineStatisticData.list.values.length === 0 ? (
          <div />
        ) : (
          <div style={{ paddingTop: 80 }}>
            <Histogram
              xLineValue={klineStatisticData.list.x90}
              fallX={klineStatisticData.list.fallX90}
              x20={klineStatisticData.list.x20}
              x80={klineStatisticData.list.x80}
              xWidth={this.xWidth === 0 ? klineStatisticData.list.x : this.xWidth}
              values={klineStatisticData.list.values}
            />
          </div>
        )}
      </Card>
    );
  }

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    const { dispatch, instrument } = this.props;
    const { param } = this.state;
    this.xWidth = 0;
    this.barWidth = {
      xWidth1: 0,
      xWidth2: 0,
      xWidth3: 0,
      xWidth4: 0,
      xWidth5: 0,
      xWidth6: 0,
      xWidth7: 0,
      xWidth8: 0,
    };
    param.stockId = instrument;
    param.type = '1';
    dispatch({
      type: 'rule/GetKlineStatistic',
      payload: param,
      callback: response => {
        if (param.type === '1') {
          this.xWidth = this.barWidth.xWidth1;
        } else if (param.type === '2') {
          this.xWidth = this.barWidth.xWidth2;
        } else if (param.type === '3') {
          this.xWidth = this.barWidth.xWidth3;
        } else if (param.type === '4') {
          this.xWidth = this.barWidth.xWidth4;
        } else if (param.type === '5') {
          this.xWidth = this.barWidth.xWidth5;
        } else if (param.type === '6') {
          this.xWidth = this.barWidth.xWidth6;
        } else if (param.type === '7') {
          this.xWidth = this.barWidth.xWidth7;
        } else if (param.type === '8') {
          this.xWidth = this.barWidth.xWidth8;
        }
        this.xWidth = this.xWidth !== 0 ? this.xWidth : response.list.x;
      },
    });
  }
}

export default OrderBarChart;
